/**
 * 学习目标：useEffect - 副作用
 *   副作用官方定义：
 *      数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。
 *   React的主作用：
 *      用于构建用户界面。
 *
 *   官方提示：
 *      如果你熟悉 React class 的生命周期函数，
 *      你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
 *
 */
import { useEffect, useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)

  // componentDidMount + componentDidUpdate
  // 1. 组件挂载时会执行一次
  // 2. 每次组件更新时会执行
  useEffect(() => {
    document.title = `当前计数器为${count}`
  })

  return (
    <div>
      <h1>useEffect-副作用</h1>
      <h2>count:{count}</h2>
      <button onClick={() => setCount(count + 1)}>点击+1</button>
    </div>
  )
}
